<template>
  <el-dialog
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :draggable="true"
    :model-value="checkDialog"
    class="check-dialog"
    title="新增物料"
    top="8vh"
    width="70%"
    @close="onCancel"
  >
    <h4 class="title_top">基本信息</h4>
    <el-form label-position="right" label-width="100">
      <el-row>
        <el-col :span="8">
          <el-form-item label="申请类型">
            <el-select
              v-model="tableDataList.type"
              class="item-input"
              clearable
              placeholder="申请类型"
              @change="onTypeUpdate"
            >
              <el-option v-for="item in options6" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item v-if="tableDataList.type == 2" label="部门物料类型">
            <el-select
              v-model="tableDataList.networkSpareType"
              class="item-input"
              clearable
              placeholder="部门物料类型"
            >
              <el-option v-for="item in options3" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="收货地址类型">
            <el-select
              v-model.trim="tableDataList.receiptAddrType"
              class="item-input"
              clearable
              placeholder="收货地址类型"
              :disabled="tableDataList.type === 2"
              @change="changeAddrType"
            >
              <el-option v-for="item in options4" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收货人姓名">
            <el-input
              v-model.trim="tableDataList.receiptName"
              class="item-input"
              clearable
              placeholder="收货人姓名"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收货人手机号">
            <el-input
              v-model.trim="tableDataList.receiptPhone"
              class="item-input item-input-phone"
              clearable
              placeholder="收货人手机号"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="收货人地址">
            <SingleAddress ref="addrsDom" :address="addrs" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="详细地址">
            <el-input
              v-model.trim="tableDataList.receiptAddress"
              :rows="2"
              class="item-input_w"
              clearable
              maxlength="200"
              placeholder="收货人详细地址"
              show-word-limit
              size="small"
              type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="table">
      <el-table
        :border="true"
        :data="tableDataList.spareMaterialVos"
        :row-class-name="tableRowClassName"
        height="300px"
        resizable
        stripe
        @cell-mouse-enter="onCellMouseEnter"
        @cell-mouse-leave="onCellMouseLeave"
      >
        <el-table-column align="center" fixed="left" label="操作" width="75">
          <template #default="scope">
            <div v-show="styleColumn[scope.$index].tableColumnIndex">
              <span>{{ scope.$index + 1 }}</span>
            </div>
            <div v-show="styleColumn[scope.$index].tableColumnBtn">
              <span class="operation">
                <el-icon class="icon" color="#007cff" size="16" @click="addItem">
                  <CirclePlus />
                </el-icon>
                <el-icon
                  class="icon"
                  color="rgba(245, 108, 108, 1)"
                  size="16"
                  @click="deleteItem(scope.$index)"
                >
                  <RemoveFilled />
                </el-icon>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="结算类型" width="150">
          <template #default="scope">
            <el-select v-model="scope.row.type" clearable filterable placeholder="结算类型">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="物料名称" width="140">
          <template #default="scope">
            <el-select
              v-model="scope.row.spareId"
              :loading="loading2"
              :remote-method="(val) => sparePageSelectList(val, scope.$index)"
              clearable
              filterable
              placeholder="请选择"
              remote
              remote-show-suffix
              @change="(id: any) => changeSpareId(id, scope.$index)"
            >
              <el-option
                v-for="item in scope.row.spareSelect"
                :label="item.name"
                :value="item.id"
                @click="clickSpareId(item, scope.$index)"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="型号" min-width="140" prop="model">
          <template #default="i">
            <el-input v-model.trim="i.row.model" disabled readonly></el-input>
          </template>
        </el-table-column>
        <el-table-column label="规格" width="120">
          <template #default="scope">
            <el-select
              v-model="scope.row.specId"
              :loading="loading2"
              :remote-method="(val: any) => spareSpecPageSelectList(val, scope.row.spareId, scope.$index)"
              clearable
              filterable
              placeholder="请选择"
              remote
              remote-show-suffix
              @change="(id: any) => clickSpecId(id, scope.$index)"
            >
              <el-option
                v-for="item in scope.row.spareSpecSelect"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click="clickspecId(item, scope.$index)"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="规格序列号" min-width="160" prop="model">
          <template #default="i">
            <el-input v-model.trim="i.row.specSku" disabled readonly></el-input>
          </template>
        </el-table-column>
        <el-table-column label="物料质保状态" width="150">
          <template #default="scope">
            <el-select
              v-model="scope.row.overinsured"
              clearable
              filterable
              placeholder="物料质保状态"
              @change="onChangeOverinsured(scope.$index)"
            >
              <el-option
                v-for="item in options5"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="申请数量" width="90">
          <template #default="scope">
            <el-input
              v-model.trim="scope.row.qty"
              clearable
              placeholder="数量"
              @input="scope.row.qty = scope.row.qty.replace(/\D/g, '')"
            />
          </template>
        </el-table-column>
        <el-table-column label="单价金额" width="120">
          <template #default="scope">
            <el-input
              v-model.trim="scope.row.price"
              clearable
              @input="scope.row.price = scope.row.price.replace(/[^\d.]/g, '')"
              @keyup="checkNum"
            >
              <template #prepend>￥</template>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="总金额" width="120">
          <template #default="scope">
            <el-input :value="scope.row.price * scope.row.qty" clearable disabled>
              <template #prepend>￥</template>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="备注" max-width="150" min-width="140">
          <template #default="scope">
            <el-input v-model.trim="scope.row.remark" clearable placeholder="填写备注" />
          </template>
        </el-table-column>
        <el-table-column label="附件(最多上传8个)" width="460">
          <template #default="scope">
            <div class="updata_pic">
              <div v-for="(img, index) in scope.row.images" :key="index" class="disf_ipc">
                <span class="item-actions">
                  <el-icon
                    class="item-preview"
                    color="#fff"
                    size="12"
                    @click="handlePictureCardPreview(img.image)"
                    ><zoom-in
                  /></el-icon>
                  <el-icon
                    class="item-delete"
                    color="#fff"
                    size="12"
                    @click="handleRemove(index, scope.$index)"
                  >
                    <Delete />
                  </el-icon>
                </span>
                <img
                  v-if="img.image.replace(/.+\./, '') == 'pdf' || img.file?.type.includes('pdf')"
                  :src="pdf"
                  alt=""
                  style="width: 100%; cursor: pointer"
                />
                <img v-else :src="img.image" class="img" />
              </div>
              <el-upload
                :auto-upload="false"
                :on-change="(file: any) => { getProImages(file, scope.$index) }"
                :show-file-list="false"
                accept="image/*,.pdf"
                action="#"
                list-type="picture-card"
                multiple
              >
                <div class="plus_add">
                  <el-icon size="12">
                    <Plus />
                  </el-icon>
                </div>
              </el-upload>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer_remark">
      <el-form-item label="申请备注" label-width="auto">
        <el-input
          v-model.trim="tableDataList.remark"
          :autosize="{ minRows: 2, maxRows: 4 }"
          class="w_input"
          clearable
          maxlength="200"
          placeholder="填写申请备注"
          show-word-limit
          size="small"
          type="textarea"
        />
      </el-form-item>
    </div>
    <div class="btns flex-justify-end">
      <el-button color="#007cff" style="width: 4vw" @click="onSaveBtn">提交申请</el-button>
      <el-button style="width: 3.2vw" @click="onCancel"> 取消</el-button>
    </div>
  </el-dialog>
  <el-dialog v-model="dialogVisible" draggable title="查看附件" top="8vh">
    <iframe :src="`${dialogImageUrl}`" frameborder="0" style="height: 660px; width: 100%"></iframe>
  </el-dialog>
</template>
<script lang="ts" setup>
  import { nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
  import {
    getOrderNetworkAddress,
    getWorkUserAddress,
    spareSaveOrder,
  } from '../../../../../api/parts'
  import { getOrderSparePageSelect, getOrderSpareSpecSelect } from '../../../../../api/order'
  import { orderAnnexUpload } from '../../../../../api/upload'
  import SingleAddress from '@/components/address/singleAddress.vue'
  import pdf from '@/assets/image/pdf.png'
  import { ElMessage } from 'element-plus'
  import { checkNum } from '../../../../../utils/validate'
  import { CirclePlus, Delete, Plus, RemoveFilled, ZoomIn } from '@element-plus/icons-vue'

  const props = defineProps({
    checkDialog: Boolean,
    workId: [String, Array],
  })
  const { checkDialog, workId } = toRefs(props)
  const dialogVisible = ref(false)
  const dialogImageUrl = ref(null)
  const loading2 = ref(false)
  const styleColumn = ref([
    {
      tableColumnBtn: false,
      tableColumnIndex: true,
    },
  ])
  const emits = defineEmits(['assign-dialog', 'update-list'])
  // 结算类型
  const options1 = [
    { name: '向部门收取', value: 1 },
    { name: '向部门支付', value: 2 },
    { name: '向公司收取', value: 3 },
    { name: '向公司支付', value: 4 },
  ]
  // 部门物料类型
  const options3 = [
    { name: '部门-外部仓物料', value: 1 },
    { name: '工程师-外部仓物料', value: 2 },
    { name: '自购物料', value: 3 },
  ]
  // 收货地址类型
  const options4 = [
    { name: '工单公司', value: 1 },
    { name: '部门', value: 2 },
  ]
  // 物料质保状态
  const options5 = [
    { name: '保内', value: false },
    { name: '保外', value: true },
  ]
  // 申请类型
  const options6 = [
    { name: '平台物料', value: 1 },
    { name: '外部物料', value: 2 },
  ]
  const tableDataList = reactive({
    delSpareMaterialIds: [], //删除的工单物料物料对象
    id: null, //
    networkSpareType: 1, //部门物料类型：1-自购物料，2-部门仓库物料
    receiptAddrType: 1, //收货地址类型：1-工单公司地址，2-部门地址,示例值(1)
    receiptAddress: '', //收货人详细地址
    receiptArea: '', //收货地址-县/区
    receiptCity: '', //收货地址-市
    receiptName: '', //收货人姓名
    receiptPhone: '', //收货人手机号
    receiptProvince: '', //收货地址-省
    receiptTown: '', //收货地址-镇
    remark: '', //备注
    spareMaterialVos: [
      //工单物料物料对象
      {
        delImageIds: [], //	删除的工单费用图片对象ID
        id: null, //物料物料ID，新增不必传，修改必传
        images: [],
        model: '', //物料型号
        name: '', //物料名称
        overinsured: false, //物料质保状态：false-保内，true-保外
        price: 0, //物料单价
        qty: 1, //	物料数量,示例值(1)
        remark: '', //备注
        spareId: null, //	物料物料ID
        specId: null, //物料物料规格ID
        specName: '', //	物料物料规格名称
        specSku: '', //设备规格编号
        type: 1, //结算类型：1-向部门收取，2-向部门支付，3-向公司收取，4-向公司支付,示例值(1)
        spareSelect: [], //物料
        spareSpecSelect: [], //规格
      },
    ],
    type: 1, //申请类型：1-商家物料，2-部门物料,示例值(1)
    userOrNetworkId: null, //用户/部门ID
    workId: null, //工单ID
  })
  const addrsDom = ref()
  const addrs = ref({
    // 地址
    province: '',
    city: '',
    area: '',
    town: '',
  })

  // 给row对象赋索引值，注：在此赋值后，才可以在其他用到row的地址取值
  const tableRowClassName = ({ row, rowIndex }) => {
    row.index = rowIndex
  }
  // 鼠标移入事件
  const onCellMouseEnter = (row, column, cell, event, index) => {
    styleColumn.value[row.index].tableColumnBtn = true
    styleColumn.value[row.index].tableColumnIndex = false
  }
  // 鼠标移出事件
  const onCellMouseLeave = (row, column, cell, event, index) => {
    styleColumn.value[row.index].tableColumnBtn = false
    styleColumn.value[row.index].tableColumnIndex = true
  }

  // 添加
  function addItem() {
    let item = {
      delImageIds: [], //	删除的工单费用图片对象ID
      id: null, //物料物料ID，新增不必传，修改必传
      images: [],
      model: '', //物料型号
      name: '', //物料名称
      overinsured: false, //物料质保状态：false-保内，true-保外
      price: 0, //物料单价
      qty: 1, //	物料数量,示例值(1)
      remark: '', //备注
      spareId: null, //	物料物料ID
      specId: null, //物料物料规格ID
      specName: '', //	物料物料规格名称
      specSku: '', //设备规格编号
      type: 1, //结算类型：1-向部门收取，2-向部门支付，3-向公司收取，4-向公司支付,示例值(1)
      spareSelect: [], //物料
      spareSpecSelect: [], //规格
    }
    tableDataList.spareMaterialVos.push(item)
    sparePageSelectList('', tableDataList.spareMaterialVos.length - 1)
    styleColumn.value.push({
      tableColumnIndex: true,
      tableColumnBtn: false,
    })
  }

  // 新增删除
  function deleteItem(n: number) {
    if (tableDataList.spareMaterialVos.length == 1) {
      return
    }
    tableDataList.spareMaterialVos = tableDataList.spareMaterialVos.filter((o, index) => {
      return index != n
    })
    styleColumn.value.splice(n, 1)
  }

  watch(
    () => tableDataList.type,
    (n) => {
      if (n == 2) {
        tableDataList.networkSpareType = 1
      }
    },
  )
  // 地址类型变化
  const changeAddrType = (val: any) => {
    addrsDom.value.getSelectAddr()
    switch (val) {
      case 1:
        getWorkUserAddressData()
        break
      case 2:
        getOrderNetworkAddressData()
        break
      default:
        tableDataList.receiptName = ''
        tableDataList.receiptPhone = ''
        tableDataList.receiptAddress = ''
        tableDataList.receiptProvince = ''
        tableDataList.receiptCity = ''
        tableDataList.receiptArea = ''
        tableDataList.receiptTown = ''
        addrs.value = {
          province: '',
          city: '',
          area: '',
          town: '',
        }
        addrsDom.value.clearSelectAddr()
        break
    }
  }
  // 获取用户地址
  const getWorkUserAddressData = () => {
    getWorkUserAddress(workId.value).then((res) => {
      if (res.data.success) {
        tableDataList.userOrNetworkId = res.data.data.row.id
        tableDataList.receiptName = res.data.data.row.name
        tableDataList.receiptPhone = res.data.data.row.phone
        tableDataList.receiptAddress = res.data.data.row.address
        tableDataList.receiptProvince = res.data.data.row.province
        tableDataList.receiptCity = res.data.data.row.city
        tableDataList.receiptArea = res.data.data.row.area
        tableDataList.receiptTown = res.data.data.row.town
        addrs.value = {
          province: tableDataList.receiptProvince,
          city: tableDataList.receiptCity,
          area: tableDataList.receiptArea,
          town: tableDataList.receiptTown,
        }
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          duration: 4000,
          offset: 200,
          type: 'error',
        })
      }
    })
  }
  // 获取部门地址
  const getOrderNetworkAddressData = () => {
    getOrderNetworkAddress(workId.value).then((res) => {
      if (res.data.success) {
        tableDataList.userOrNetworkId = res.data.data.row.id
        tableDataList.receiptName = res.data.data.row.name
        tableDataList.receiptPhone = res.data.data.row.phone
        tableDataList.receiptAddress = res.data.data.row.address
        tableDataList.receiptProvince = res.data.data.row.province
        tableDataList.receiptCity = res.data.data.row.city
        tableDataList.receiptArea = res.data.data.row.area
        tableDataList.receiptTown = res.data.data.row.town
        addrs.value = {
          province: tableDataList.receiptProvince,
          city: tableDataList.receiptCity,
          area: tableDataList.receiptArea,
          town: tableDataList.receiptTown,
        }
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          duration: 4000,
          offset: 200,
          type: 'error',
        })
      }
    })
  }
  // 获取物料下拉数据
  const sparePageSelectList = async (val: string, index) => {
    let data = {
      limit: 0,
      name: val,
      page: 0,
    }
    loading2.value = true
    await getOrderSparePageSelect(data, workId.value).then((res) => {
      if (res.data.code == 20000) {
        tableDataList.spareMaterialVos[index].spareSelect = res.data.data.rows
        loading2.value = false
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: 'error',
          duration: 3000,
        })
      }
    })
  }
  // 物料变化
  const changeSpareId = (id: any, index: string | number) => {
    tableDataList.spareMaterialVos[index].specId = null
    tableDataList.spareMaterialVos[index].specSku = ''
    tableDataList.spareMaterialVos[index].specName = ''
    tableDataList.spareMaterialVos[index].price = 0
    tableDataList.spareMaterialVos[index].spareSpecSelect = []
    if (id) {
      spareSpecPageSelectList('', id, index)
    }
  }
  // 规格变化
  const clickSpecId = (id, index) => {
    if (!id) {
      tableDataList.spareMaterialVos[index].specSku = ''
      tableDataList.spareMaterialVos[index].specName = ''
      tableDataList.spareMaterialVos[index].price = 0
    }
  }

  // 获取规格下拉数据
  const spareSpecPageSelectList = async (val: string, id: any, index) => {
    if (!id) {
      return
    }
    let data = {
      limit: 0,
      name: val,
      page: 0,
    }
    loading2.value = true
    await getOrderSpareSpecSelect(data, id).then((res) => {
      if (res.data.code == 20000) {
        tableDataList.spareMaterialVos[index].spareSpecSelect = res.data.data.rows
        loading2.value = false
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: 'error',
          duration: 3000,
        })
      }
    })
  }
  // 点击物料
  const clickSpareId = (val, index: string | number) => {
    tableDataList.spareMaterialVos[index].model = val.model
    tableDataList.spareMaterialVos[index].name = val.name
  }
  // 点击物料规格
  const clickspecId = (val: any, index: any) => {
    tableDataList.spareMaterialVos[index].specSku = val.specSkuCode
    tableDataList.spareMaterialVos[index].specName = val.name
    tableDataList.spareMaterialVos[index].price = tableDataList.spareMaterialVos[index].overinsured
      ? val.overPrice
      : val.price
  }
  // 质保状态改变
  const onChangeOverinsured = (index) => {
    tableDataList.spareMaterialVos[index].spareSpecSelect.map((item) => {
      if (tableDataList.spareMaterialVos[index].specId === item.id) {
        tableDataList.spareMaterialVos[index].price = tableDataList.spareMaterialVos[index]
          .overinsured
          ? item.overPrice
          : item.price
        return
      }
    })
  }

  // 保存
  async function onSaveBtn() {
    for (const key in tableDataList.spareMaterialVos) {
      let imgobj = tableDataList.spareMaterialVos[key]
      let arrimg = []
      if (imgobj.images.length > 0) {
        for (const i in imgobj.images) {
          arrimg.push(imgobj.images[i].file)
        }
        if (imgobj.images[0].file) {
          await orderAnnexUpload(arrimg).then((res) => {
            imgobj.images = res.data.data.rows.map((o) => ({ id: null, image: o }))
          })
        }
      }
    }
    const addr = addrsDom.value.getSelectAddr()
    tableDataList.receiptProvince = addr.province
    tableDataList.receiptCity = addr.city
    tableDataList.receiptArea = addr.area
    tableDataList.receiptTown = addr.town
    if (tableDataList.type == 1) {
      tableDataList.networkSpareType = 1
    }
    tableDataList.workId = workId.value
    await spareSaveOrder(tableDataList).then((res) => {
      if (res.data.success) {
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: 'success',
          offset: 200,
        })
        emits('update-list')
        onCancel()
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          duration: 4000,
          offset: 200,
          type: 'error',
        })
      }
    })
  }

  // 删除图片
  const handleRemove = (imgindex: number, index: string | number) => {
    tableDataList.spareMaterialVos[index].images = tableDataList.spareMaterialVos[
      index
    ].images.filter((o, i) => i != imgindex)
  }
  // 查看图片
  const handlePictureCardPreview = (img: any) => {
    dialogImageUrl.value = img
    dialogVisible.value = true
  }
  //监听查看附件弹窗关闭时销毁 iframe内存
  watch(dialogVisible, (n) => {
    if (!n) {
      dialogImageUrl.value = 'about:blank'
    }
  })
  // 添加图片
  const getProImages = async (img: any, index: any) => {
    if (tableDataList.spareMaterialVos[index].images.length >= 8) {
      ElMessage({
        showClose: true,
        message: '最多上传8个',
        duration: 4000,
        offset: 200,
        type: 'error',
      })
      return
    }
    tableDataList.spareMaterialVos[index].images.push({ image: img.url, file: img.raw })
  }

  // 申请类型更新事件
  const onTypeUpdate = () => {
    if (tableDataList.type === 2) {
      tableDataList.receiptAddrType = 1
    }
  }

  const onCancel = () => {
    emits('assign-dialog')
  }
  onMounted(() => {
    nextTick(() => {
      setTimeout(() => {
        getWorkUserAddressData()
      }, 500)
      sparePageSelectList('', 0)
    })
  })
</script>
<style lang="scss" scoped>
  .title_top {
    border-left: 2px solid #007cff;
    line-height: 14px;
    padding-left: 6px;
    margin-bottom: 8px;
  }

  :deep(.el-form-item) {
    margin-right: 15px;
    margin-bottom: 14px;

    .el-cascader .el-input {
      width: 220px;
    }

    .item-input {
      width: 300px;
    }

    .item-input-phone {
      width: 180px;
    }

    .item-input_w {
      width: 390px;
    }

    .el-form-item__label {
      font-size: 12px;
    }
  }

  :deep(.el-form-item .el-cascader .el-input) {
    width: 390px;
  }

  .form_sction {
    display: flex;
    align-items: flex-start;
  }

  .operation {
    display: flex;
    justify-content: center;
    align-items: center;

    .icon {
      cursor: pointer;
      margin: 0 6px;

      &:hover {
        transform: scale(1.2);
      }
    }
  }

  :deep(.el-table td.el-table__cell) {
    .el-input {
      .el-input-group__prepend {
        padding: 0 2px;
      }
    }
  }

  .btn_save {
    width: 60px;
  }

  .btn_cancel {
    width: 60px;

    &:hover {
      border: 1px solid #e5e5e5;
      color: #999;
      background-color: #e5e5e5;
    }
  }

  .footer_remark {
    margin-top: 20px;

    .w_input {
      width: 600px;
      margin-left: 10px;
    }
  }

  :deep(.updata_pic) {
    display: flex;
    align-items: center;

    .el-upload {
      &.el-upload--picture-card {
        width: 40px;
        height: 40px;
      }
    }

    .disf_ipc {
      display: flex;
      width: 40px;
      height: 40px;
      position: relative;
      margin-right: 6px;
      border: 1px solid #7f7f7f27;
      border-radius: 4px;
      box-sizing: border-box;
      overflow: hidden;

      .img {
        width: 100%;
        position: absolute;
        border-radius: 4px;
      }

      .item-actions {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
      }

      &:hover .item-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #7f7f7f9d;
        opacity: 1;
        border-radius: 4px;

        .item-preview {
          margin: 0 4px;
          cursor: pointer;

          &:hover {
            transform: scale(1.2);
          }
        }

        .item-delete {
          margin: 0 4px;
          cursor: pointer;

          &:hover {
            transform: scale(1.2);
          }
        }
      }
    }
  }
</style>
